@page "/accessibility"

<PageTitle>Blazor Accessibility | Free UI Components by Radzen</PageTitle>
<HeadContent>
    <meta name="description" content="The accessible Radzen Blazor Components library covers highest levels of web accessibility guidelines and recommendations, making you Blazor app compliant with WAI-ARIA, WCAG 2.2, section 508, and keyboard compatibility standards.">
</HeadContent>
<RadzenText TextStyle="TextStyle.H2" TagName="TagName.H1" class="rz-pt-8">
    Accessibility
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P">
    Radzen Blazor Components library prioritizes accessibility for all users by adhering to the highest levels of web accessibility guidelines and recommendations. It can help you make your Blazor app accessible and compliant with WAI-ARIA, WCAG 2.2, Section 508, and keyboard compatibility standards.
</RadzenText>

<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
    This page covers accessibility implementation including WCAG 2.2 AA compliant theme colors, High Contrast themes, ARIA attributes, semantic HTML, screen reader compatibility, responsive design, keyboard navigation with focus management, and an Accessibility Conformance Report (ACR) based on VPAT® format.
</RadzenText>

<RadzenText Anchor="accessibility#applying-guidelines" TextStyle="TextStyle.H4" TagName="TagName.H2" class="rz-pt-12">
    Applying guidelines
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1">
    While the components cover various accessibility standards to provide an inclusive user experience out of the box, inappropriate positioning or component configurations might lead to barriers such as low contrast between text and background colors, small text, empty or missing labels, etc. In addition, different standards and accessibility levels of conformance have different success criteria. All this introduces the need to always be aware and test your layouts, content, and component configurations against the desired accessibility guidelines.
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1">
    Read more about <RadzenLink Path="https://www.w3.org/WAI/test-evaluate/preliminary/" Text="testing and evaluating web accessibility" target="_blank" /> on the World Wide Web Consortium (W3C) website.
</RadzenText>

<RadzenText Anchor="accessibility#wcag" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    WCAG 2.2  
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1">
    WCAG stands for Web Content Accessibility Guidelines - an internationally recognized set of recommendations for making web content more accessible. The latest WCAG 2.2 is the recommended specification by (W3C) since October 5, 2023.
</RadzenText>

<RadzenText TextStyle="TextStyle.Body1">
    See <RadzenLink Path="https://www.w3.org/WAI/WCAG22/quickref/" Text="How to Meet WCAG (Quick Reference)" target="_blank" />.
</RadzenText>

<RadzenText Anchor="accessibility#wcag-colors" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    WCAG compliant theme colors (AA level of conformance)  
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1">
    The Radzen.Blazor library contains a set of complementary WCAG AA compliant color sets for each one of the available themes.
</RadzenText>
<RadzenText TextStyle="TextStyle.H6" TagName="TagName.H3" Text="Preview" class="rz-pt-6" />
<RadzenText TextStyle="TextStyle.Body1">
    To preview the colors in the demos, enable the "Use WCAG compliant colors" option in the demos configuration.
</RadzenText>
<RadzenText TextStyle="TextStyle.H6" TagName="TagName.H3" Text="Usage" class="rz-pt-6" />
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    To use the colors in your apps, include the <code>[theme]-wcag.css</code> file right after the <code>[theme]-base.css</code>:
</RadzenText>
<pre>
<code>
&lt;link rel="stylesheet" href="_content/Radzen.Blazor/css/standard-base.css"&gt;
&lt;link rel="stylesheet" href="_content/Radzen.Blazor/css/standard-wcag.css"&gt; &lt;!-- Load WCAG 2.2 AA compliant colors --&gt;

</code>
</pre>

<RadzenText Anchor="accessibility#high-contrast-colors" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    High Contrast theme colors <RadzenBadge title="To use it in your application you need an active Radzen Blazor subscription." Style="vertical-align: top;">PRO</RadzenBadge> 
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1">
    Higher contrast makes app content easier to look at and quicker to read. 
</RadzenText>
<RadzenAlert AlertStyle="AlertStyle.Info" Shade="Shade.Lighter" AllowClose="false">
    HighContrast swatches are a premium feature available in Radzen Blazor Studio with an active Radzen Blazor subscription. <RadzenLink Path="https://www.radzen.com/blazor-studio/documentation/appearance/themes-and-swatches/#swatches" Text="Read more ..." target="_blank" />
</RadzenAlert>
<RadzenImage Path="images/blazor-standard-theme-wcag-highcontrast.png" Style="width: 100%;" class="rz-my-6 rz-border-radius-4" AlternateText="Radzen Blazor Standard theme with default, WCAG AA, and HighContrast WCAG AAA colors" />

<RadzenText Anchor="accessibility#wai-aria" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    ARIA attributes 
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1">
    Radzen.Blazor leverages Accessible Rich Internet Applications (ARIA) attributes to enhance the accessibility of the components. ARIA attributes provide additional information to assistive technologies, making complex widgets and interactions more understandable and navigable for users with disabilities.
</RadzenText>

<RadzenText TextStyle="TextStyle.Body1">
    See <RadzenLink Path="https://www.w3.org/WAI/ARIA/apg/" Text="ARIA Authoring Practices Guide (APG)" target="_blank" />.
</RadzenText>

<RadzenText Anchor="accessibility#semantic-html" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Semantic HTML
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1">
    Radzen.Blazor prioritizes the use of semantic HTML elements to ensure proper document structure and meaningful markup. Semantic HTML helps screen readers and other assistive technologies understand the content and navigate through it more efficiently.
</RadzenText>

<RadzenText Anchor="accessibility#screen-readers" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Screen reader compatibility
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1">
Radzen.Blazor provides appropriate labels, roles, and descriptions to enable screen reader users to understand and interact with the components effectively.
</RadzenText>

<RadzenText Anchor="accessibility#responsive-design" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Responsive design
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1">
     The components are designed to be responsive and adaptable to different screen sizes and devices. Accessibility features remain intact across various <RadzenLink Path="/breakpoints" Text="breakpoints" target="_blank" />, enabling users to access and use the components seamlessly on desktops, tablets, and mobile devices.
</RadzenText>

<RadzenText Anchor="accessibility#keyboard-compatibility" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Keyboard compatibility 
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1">
    Keyboard compatibility implies that all application functionality must be usable with the keyboard without any focus traps, allowing the user to freely move across the application via only a keyboard interface.
</RadzenText>

<RadzenText TextStyle="TextStyle.H6" TagName="TagName.H3" Text="Focus management" class="rz-pt-6" />
<RadzenText TextStyle="TextStyle.Body1">
    Focus states are carefully managed to ensure that keyboard users can easily identify which element has focus as they navigate through the components. Clear and consistent focus styles are applied to interactive elements to enhance usability and accessibility.
</RadzenText>

<RadzenText TextStyle="TextStyle.H6" TagName="TagName.H3" Text="Keyboard navigation with Radzen Blazor Components" class="rz-pt-6" />
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    The following is a list of the common key shortcuts to navigate and interact with Radzen Blazor Components.
</RadzenText>

<KeyboardNavigationDataGrid Data="@shortcuts" />

<RadzenText Anchor="accessibility#acr" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Accessibility Conformance Report (ACR)
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1">
    Radzen Blazor Components ACR is based on an ITI VPAT® format covering Section 508 (U.S.), EN 301 549 (EU), and W3C/WAI WCAG.
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1">
    The use of Radzen Blazor Components does not constitute and guarantee that the end-user software will be compliant with accessibility standards and guidelines. The components provide means to developers to cover the required accessibility criteria and functionalities.
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1">
    <RadzenLink Path="https://cdn.radzen.com/VPAT2.5Rev-INT-May2025-Radzen-Blazor-Components.pdf" target="_blank" Title="Download Radzen Blazor Components Accessibility Conformance Report">Download Radzen Blazor Components VPAT</RadzenLink>
</RadzenText>

@code {
    public List<KeyboardShortcut> shortcuts = new()
    {
        new KeyboardShortcut { Key = "Tab", Action = "Focus next UI element." },
        new KeyboardShortcut { Key = "Shift + Tab", Action = "Focus previous UI element." },
        new KeyboardShortcut { Key = "Arrow keys in a focused complex component", Action = "Focus subcomponents." },
        new KeyboardShortcut { Key = "Space or Enter", Action = "Toggle component's state or navigate." },
        new KeyboardShortcut { Key = "Esc", Action = "Close or collapse a component." }
    };
}
